<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #box2 {
            width: 200px;
            height: 100px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <div id="box2"></div>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        /*
          dom 

              查询 
                  document.querySelector all -》$()
              属性 
                  标准属性
                      dom.属性名 
                      dom.属性名 = 属性值
                      dom.checked 
                      dom.checked =true


                      -》jq 
                          $('#ck1').prop('属性名')
                          $('#ck1').prop('属性名','属性值')
                  自定义属性
                      dom.setAttribute()
                      dom.getAttribute()
                      dom.rmoveAttribute()
                      dom.dataset.xx -> data-xx

                      ->jq
                          $().attr(key)
                          $().attr(key,value)


              内容
                  ipt.value
                  div.innerHTML
                  div.innerText
                  ->jq
                  $().val()
                  $().val('aa')
                  $().html()
                  $().html('aa')

                  $().text()
                  $().text('bb')



              样式
                  获取样式
                      getComputedStyle 最终样式
                  设置样式
                      dom.style.xx = 'xx'   行内样式

                   -》jq
                        获取样式
                      $().css(key)   
                       设置样式
                      $().css(key,value)   


                      $().css({key:value,key1:value2})   





              class

              dom节点关系   ->       筛选器  父子 兄弟 

              dom 创建-添加-删除-替换
      
      */


        // 设置样式

        // 参数 函数会被调用多次
        /*    $('div').css('width', function (i, v) {
   
               // 0 100px
               // i  元素下标
               // v  元素的width 属性当前值
               console.log(i, v);
               // return 要设置的值
               if (i == 0) {
                   return 200
               } else if (i == 1) {
                   return 300;//
   
               }
               // return 300+'px'
           }) */

        //  （设置操作-修改操作-删除操作）内置循环 --隐式迭代
        //设置所有选中div宽度
        // $('div').css('width', 200)

        //获取是 第一个匹配元素的属性
        console.log($('div').css('width'));





    </script>

</body>

</html>